<template>
<a-card @click="clear" class="content">
  <img id="panel" :src="bg" alt/>
  <div id="capsule" >
    <Battery
        :ref="el => refs[index] = el"
        v-for="(bat,index) in batteries"
        @choose="select" :id="bat.id"
        :state="bat.state"/>
  </div>
</a-card>
</template>
<script lang="ts">
export default {
  name: 'BatteryPanel'
}
</script>
<script lang="ts" setup>
import bg from '../../assets/cars/ car_2.png'
import Battery from './Battery.vue'
import {onBeforeUpdate, onMounted, ref} from 'vue'

const refs = ref<typeof Battery[]>([])
const select = (id: number) => {
  refs.value.filter((b:typeof Battery) => b.id !== id).forEach(b => b.releaseFor(id))
}

const clear = () => {
  console.log('clear ...')
  refs.value.forEach(b => b.releaseFor(-1))
}

const batteries = ref([
  {id: 1, state: 3},
  {id: 2, state: 2},
  {id: 3, state: 2},
  {id: 4, state: 3},
  {id: 5, state: 3},
  {id: 6, state: 3},
  {id: 7, state: 3},
  {id: 8, state: 3},
])
onBeforeUpdate(() => refs.value = [])
onMounted(() => console.log(refs.value))
</script>

<style lang="scss" scoped>
#panel {
  width: 300px;
}

.content {
  display: flex;
  align-content: flex-start;
  width: 800px;
  background-color: #2f3b52;
}

#capsule {
  display: flex;
  position: absolute;
  height: 215px;
  width: 140px;
  left: 103px;
  top: 175px;
  background-color: #001a1f;
  flex-wrap: wrap;
}
</style>
